<template>
  <div class="pie-charts">
    <div ref="pieCharts" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import { Tools } from "@/model/tools.ts";
import { on, off } from "@utils/event.js";
import echarts from "echarts";
import macarons from "./macarons.json";
echarts.registerTheme("macarons", macarons.theme);
@Component
export default class PieCharts extends Tools {
  public $refs!: {
    pieCharts: any;
  };
  @Prop({ default: "饼图" })
  private title!: string;
  @Prop()
  private subTitle!: string;
  @Prop()
  private legend!: Array<any>;
  @Prop({ default: "数据" })
  private seriesName!: string;
  @Prop({ default: "100%" })
  private width!: string;
  @Prop({ default: "480px" })
  private height!: string;
  //初试对象
  private pieCharts: any = null;

  //方法
  private resize() {
    this.pieCharts.resize();
  }

  private setValue(seriesData) {
    let vm = this;
    vm.$nextTick(() => {
      vm.pieCharts.setOption({
        series: [
          {
            name: vm.seriesName,
            data: seriesData
          }
        ]
      });
    });
  }

  mounted() {
    const options = {
      title: {
        text: this.title,
        subtext: "",
        x: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: this.legend
      },
      series: [
        {
          name: this.seriesName,
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    //设置副标题
    if (this.subTitle && this.subTitle !== "") {
      options.title.subtext = this.subTitle;
    }
    //每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
    this.$nextTick(() => {
      this.pieCharts = echarts.init(this.$refs.pieCharts, "macarons");
      this.pieCharts.setOption(options);
      //绑定事件
      on(window, "resize", this.resize);
    });
  }

  private beforeDestroy() {
    off(window, "resize", this.resize);
  }
}
</script>
